import React, { useState, useEffect } from 'react'
import { Button, Table, Tag, Modal, message, Popover, Switch } from 'antd';
import { HighlightOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { getMenuList, delRight, delChildRight, switchRight, switchChildRight } from '@api'

export default function RightList(props) {
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  // 定义列表
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id'
    },
    {
      title: '权限名称',
      dataIndex: 'title'
    },
    {
      title: "权限路径",
      dataIndex: 'key',
      render: (key) => {
        return <Tag color="orange">{key}</Tag>
      }
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Popover content={
              <div style={{ textAlign: "center" }}>
                <Switch checked={Number(item.pagepermisson)} onChange={() => switchMethod(item)} />
              </div>
            } title="是否显示在菜单栏" trigger={item.pagepermisson === undefined ? '' : 'click'}>
              <Button type="primary" icon={<HighlightOutlined />} disabled={item.pagepermisson === undefined} />
            </Popover>
            <Button type="primary" danger icon={<DeleteOutlined />} onClick={() => { delThisRight(item) }} />
          </div>
        )
      }
    },
  ]
  // 定义列表数据
  const [dataSource, setdataSource] = useState([])
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  useEffect(() => {
    get_right_list()
  }, [])
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  // 获取权限列表
  const get_right_list = () => {
    getMenuList({
      _embed: 'children'
    }).then((res) => {
      const list = res.data
      list.forEach(item => {
        if (item.children.length === 0) {
          item.children = ""
        }
      })
      setdataSource(list)
    })
  }

  // 删除单个
  const delThisRight = (item) => {
    Modal.confirm({
      title: '确认删除这个吗',
      icon: <ExclamationCircleOutlined style={{ color: 'red' }} />,
      content: '注意：该操作无法撤回',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        if (item.grade === 1) {
          setdataSource(dataSource.filter(data => data.id !== item.id))
          delRight(item.id).then(() => {
            message.success({
              content: '删除成功 ',
            });
          })
        } else {
          let list = dataSource.filter(data => data.id === item.rightId)
          list[0].children = list[0].children.filter(data => data.id !== item.id)
          setdataSource([...dataSource])
          delChildRight(item.id).then(() => {
            message.success({
              content: '删除成功',
            });
          })
        }
      }
    })
  }

  // 控制菜单是否显示
  const switchMethod = (item) => {
    item.pagepermisson = Number(item.pagepermisson) === 1 ? 0 : 1
    setdataSource([...dataSource])
    if (item.grade === 1) {
      switchRight({
        id: item.id,
        pagepermisson: item.pagepermisson
      }).then(() => {
        message.success({
          content: '修改成功',
          duration: 0.5,
          onClose: () => {
            props.history.go(0)
          }
        });
      })
    } else {
      switchChildRight({
        id: item.id,
        pagepermisson: item.pagepermisson
      }).then(() => {
        message.success({
          content: '修改成功',
          duration: 0.5,
          onClose: () => {
            props.history.go(0)
          }
        });
      })
    }
  }
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={{ pageSize: 5 }} scroll={{ y: 700 }} />
    </div>
  )
}
